<!--
 * @Author: houmin 745762351@qq.com
 * @Date: 2023-09-11 09:50:52
 * @LastEditors: houmin 745762351@qq.com
 * @LastEditTime: 2023-12-05 02:02:26
 * @FilePath: \tch-h5\src\views\hotel-detail\HotelDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <Header title="嗨耍卡详情" :back="true" path="/" />
  <div class="haishua-details">
    <div class="img-box">
      <img :src="cardInfo?.coverImage" height="187" alt="" />
      <div class="cardInfos">
        <div class="titles">
          <div style="font-weight:bold;text-align: center;
    line-height: 25px;display: inline-block;
    width: 80%;">{{ cardInfo?.cardName }}</div>
        <div style="margin-top: 1rem;text-align: center;
    line-height: 25px;display: inline-block;
    width: 80%;" v-html="cardInfo?.cardDesc"></div>
        </div>
        <div class="bar-num" style="font-size: 2.6rem">
          <!-- ¥{{ cardInfo?.nowPrice }} -->
          {{ cardInfo?.discount }}
        </div>
      </div>
    </div>
    <p class="title" v-if="couponInfo.length">特权1 超值优惠</p>
    <div class="card mb10" v-if="couponInfo.length">
      <div class="coupon-item" v-for="item in couponInfo" :key="item.id">
        <div class="money">{{ item.discount }}<span class="fz22">折</span></div>
        <div class="des">
          <div class="content">
            <p class="text-orange fz22 blod">{{ item.couponName }}</p>
            <p class="fz12">{{ item.couponDesc }}</p>
          </div>
          <!-- <div class="price">x {{ item.couponCount }}</div> -->
        </div>
      </div>
      <!-- <div class="coupon-item">
        <div class="money"><span class="fz30">￥</span>20</div>
        <div class="des">
          <div class="content">
            <p class="text-orange fz22 blod">酒店优惠券</p>
            <p class="fz12">所有酒店/民宿通用</p>
          </div>
          <div class="price">X5</div>
        </div>
      </div>
      <div class="coupon-item">
        <div class="money"><span class="fz30">￥</span>20</div>
        <div class="des">
          <div class="content">
            <p class="text-orange fz22 blod">餐饮优惠券</p>
            <p class="fz12">阿里巴巴普惠体</p>
          </div>
          <div class="price">X5</div>
        </div>
      </div> -->
    </div>
    <!-- <p class="title">特权2 xxxxx</p>
    <div class="card">
      <p class="fz12 mt10 desc">
        {{ cardInfo?.cardDesc }}
      </p>
    </div> -->
  </div>
  <van-action-bar>
    <div v-if="cardInfo?.openStatus === 0">
      <span class="bar-num">¥{{ cardInfo?.nowPrice }}</span>
      <span class="bar-old-num">¥{{ cardInfo?.originalPrice }}</span>
      <van-action-bar-button type="danger" text="立即购买" @click="pay" />
    </div>
    <div class="has" v-if="cardInfo?.openStatus === 1">
      <span class="bar-num-left">已开通</span>
      <span class="bar-num-right">有效日期至：{{ cardInfo?.expireTime }}</span>
    </div>
  </van-action-bar>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Header from "@/components/header/Header.vue";
import api from "@/api/index.js";
import { useRoute } from "vue-router";
import { goPayUrl } from "@/utils/pay.js";
import { showDialog } from 'vant';
const route = useRoute();

const cardInfo = ref([]);
const couponInfo = ref([]);
const getCardInfo = (val) => {
  api.getCardInfoApi({ cardId: val }).then((res) => {
    cardInfo.value = res.data;
  });
};

const getCouponCardInfo = (val) => {
  api.getCouponCardList({ cardId: val }).then((res) => {
    couponInfo.value = res.data;
  });
};

onMounted(() => {
  getCardInfo(route.query.cardId);
  getCouponCardInfo(route.query.cardId);
});

const pay = async () => {
  // if(localStorage.getItem('hasCard')) return showDialog({ title: '提示',message: '您还有未到期的折扣券，使用后可继续购买。' });
  let { code, data } = await api.getPayUrl({
    cardId: cardInfo.value.id,
    finishUrl:
      window.location.protocol + "//" + window.location.host + "/#/order?title=haishua",
  });
  if (code == 200) goPayUrl({ payId: data.payId }); // window.location.href = data.payUrl;
};
</script>

<style lang="scss" scoped>
.haishua-details {
  width: 100%;
  height: calc(100vh - 100px);
  background: url("../../assets/images/oneCard/bg.png") no-repeat;
  background-size: contain;
  padding-top: 0.1rem;
  overflow-y: auto;
  .img-box {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    margin: 2rem;
    border-radius: 8px;
    .cardInfos {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // align-items: flex-end;
      text-align: right;
      padding: 2rem 1.4rem 2rem 0;
      .titles {
        font-size: 1.35rem;
      }
    }
  }
  .card {
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1rem;
    margin: 1.5rem;
    box-shadow: 2px 2px 6px rgba(189, 189, 189, 0.7);
    p {
      line-height: 1.5;
    }
  }
  .title {
    position: relative;
    margin-top: 1rem;
    margin-left: 3rem;
    font-size: 1.4rem;
    font-weight: bold;
    &::before {
      position: absolute;
      content: "";
      left: -1rem;
      height: 1.5rem;
      width: 0.4rem;
      border-radius: 0.2rem;
      background: rgba(79, 172, 145, 1);
    }
  }
  .desc {
    padding: 2rem;
  }
  .coupon-item {
    display: flex;
    height: 7.2rem;
    margin-bottom: 1.5rem;
    background: url("../../assets/images/oneCard/coupon_bg.png") no-repeat;
    background-size: 100% 100%;
  }
  .money {
    width: 27%;
    text-align: center;
    font-size: 3.6rem;
    line-height: 2;
    font-weight: normal;
    color: #fff;
  }
  .content {
    width: 100%;
  }
  .des {
    display: flex;
    flex: 1;
    padding: 0 2rem;
    align-items: center;
    justify-content: space-between;
  }
  .price {
    font-size: 3.4rem;
    color: rgb(239, 119, 35);
  }
}
.bar-num {
  font-size: 3.6rem;
  font-weight: bold;
  color: rgba(239, 119, 35, 1);
  margin-left: 2rem;
  margin-right: 2rem;
}
.bar-old-num {
  font-size: 2rem;
  color: rgba(139, 139, 139, 1);
  text-decoration: line-through;
}
.bar-num-left {
  margin-left: 1.5rem;
  font-size: 3rem;
  color: rgba(239, 119, 35, 1);
}
.bar-num-right {
  flex: 1;
  padding-right: 1.5rem;
  text-align: right;
  font-size: 1.4rem;
  color: rgba(239, 119, 35, 1);
}
.van-action-bar-button--danger {
  width: 10.1rem !important;
}
.van-action-bar-button {
  flex: none;
  position: absolute;
  right: 1rem;
  width: 100px;
  height: 34px;
  border-radius: 5px;
  background: rgba(79, 172, 145, 1);
  padding: 5px;
}
.van-action-bar {
  // justify-content: space-between;
  box-shadow: -2px -1px 6px rgba(189, 189, 189, 0.7);
}
.has {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>